import React, { useState, useEffect } from 'react';
import { Modal, Empty, Spin, Button } from 'antd';
import { Phone, User, Briefcase, MessageSquare, QrCode, Upload } from 'lucide-react';
import { contactApi } from '../../services/api';

interface ContactPerson {
  name: string;
  position: string;
  description: string;
  phone: string;
  wechatQr: string;
}

interface ContactModalProps {
  open: boolean;
  onClose: () => void;
}

const ContactModal: React.FC<ContactModalProps> = ({ open, onClose }) => {
  const [contacts, setContacts] = useState<ContactPerson[]>([]);
  const [loading, setLoading] = useState(false);

  // 获取联系人数据
  const fetchContacts = async () => {
    try {
      setLoading(true);
      const data = await contactApi.getPublicContacts();
      // 转换API数据格式为组件需要的格式，限制最多显示2个联系人
      const formattedContacts = data.slice(0, 2).map(contact => ({
        name: contact.name,
        position: contact.position || '客服专员',
        description: contact.description || `专业的${contact.position || '服务人员'}，为您提供优质服务。`,
        phone: contact.phone,
        wechatQr: contact.wechatQr || "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=WeChat%20QR%20code%20placeholder%20professional%20design&image_size=square"
      }));
      setContacts(formattedContacts);
    } catch (error) {
      console.error('获取联系人数据失败:', error);
      setContacts([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open) {
      fetchContacts();
    }
  }, [open]);

  return (
    <Modal
      title={
        <div className="text-center">
          <h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">联系我们</h2>
          <p className="text-gray-600 text-sm">专业团队为您提供优质服务</p>
        </div>
      }
      open={open}
      onCancel={onClose}
      footer={null}
      width={"90%"}
      style={{ maxWidth: 800 }}
      className="contact-modal"
      centered
    >
      <div className="py-4 sm:py-6">
        <Spin spinning={loading}>
          {contacts.length === 0 && !loading ? (
            // 空状态显示 - 响应式优化
            <div className="text-center py-8 sm:py-12">
              <Empty
                image={<Upload className="w-12 h-12 sm:w-16 sm:h-16 text-gray-400 mx-auto mb-4" />}
                description={
                  <div className="space-y-2">
                    <p className="text-gray-600 text-base sm:text-lg font-medium">暂无联系人信息</p>
                    <p className="text-gray-500 text-sm">管理员尚未上传联系人信息，请稍后再试</p>
                  </div>
                }
              >
                <div className="mt-4 sm:mt-6 p-3 sm:p-4 bg-blue-50 rounded-lg border border-blue-200">
                  <h4 className="text-blue-800 font-medium mb-2 text-sm sm:text-base">📞 临时联系方式</h4>
                  <p className="text-blue-700 text-sm">
                    如需紧急联系，请拨打客服热线：<br />
                    <span className="font-mono font-bold">400-000-0000</span>
                  </p>
                </div>
              </Empty>
            </div>
          ) : (
            // 有数据时显示联系人列表 - 响应式优化
            <div className={`grid gap-4 sm:gap-6 lg:gap-8 ${contacts.length === 1 ? 'grid-cols-1 max-w-md mx-auto' : 'grid-cols-1 md:grid-cols-2'}`}>
              {contacts.map((contact, index) => (
                <div
                  key={index}
                  className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl sm:rounded-2xl p-4 sm:p-6 border border-blue-100 hover:shadow-lg transition-all duration-300 flex flex-col h-full"
                >
                  {/* 头像和基本信息 - 响应式优化 */}
                  <div className="flex items-center mb-3 sm:mb-4">
                    <div className="w-12 h-12 sm:w-16 sm:h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mr-3 sm:mr-4">
                      <User className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-1">{contact.name}</h3>
                      <div className="flex items-center text-blue-600">
                        <Briefcase className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
                        <span className="text-xs sm:text-sm font-medium">{contact.position}</span>
                      </div>
                    </div>
                  </div>

                  {/* 简述 - 响应式优化 */}
                  <div className="mb-3 sm:mb-4 flex-shrink-0">
                    <div className="h-10 sm:h-12 flex items-center">
                      <p className="text-gray-600 text-xs sm:text-sm leading-relaxed pl-4 sm:pl-6 overflow-hidden" style={{display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical'}}>
                        {contact.description}
                      </p>
                    </div>
                  </div>

                  {/* 联系方式 - 响应式优化 */}
                  <div className="space-y-3 sm:space-y-4 flex-grow flex flex-col justify-end">
                    {/* 电话 */}
                    <div className="flex items-center justify-between bg-white rounded-lg p-2 sm:p-3 border border-gray-200">
                      <div className="flex items-center">
                        <Phone className="w-3 h-3 sm:w-4 sm:h-4 text-green-500 mr-2" />
                        <span className="text-xs sm:text-sm font-medium text-gray-700">电话</span>
                      </div>
                      <a
                        href={`tel:${contact.phone}`}
                        className="text-green-600 font-medium hover:text-green-700 transition-colors text-xs sm:text-sm"
                      >
                        {contact.phone}
                      </a>
                    </div>

                    {/* 微信二维码 - 响应式优化 */}
                    <div className="bg-white rounded-lg p-2 sm:p-3 border border-gray-200">
                      <div className="flex items-center mb-2 sm:mb-3">
                        <QrCode className="w-3 h-3 sm:w-4 sm:h-4 text-green-500 mr-2" />
                        <span className="text-xs sm:text-sm font-medium text-gray-700">微信联系</span>
                      </div>
                      <div className="flex justify-center">
                        <div className="relative">
                          <img
                            src={contact.wechatQr}
                            alt={`${contact.name}的微信二维码`}
                            className="w-20 h-20 sm:w-24 sm:h-24 rounded-lg border-2 border-gray-200"
                          />
                          <div className="absolute inset-0 bg-green-500 bg-opacity-10 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                            <span className="text-xs text-green-700 font-medium">扫码添加</span>
                          </div>
                        </div>
                      </div>
                      <p className="text-xs text-gray-500 text-center mt-1 sm:mt-2">扫码添加微信</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* 底部提示 - 响应式优化 */}
          {contacts.length > 0 && (
            <div className="mt-6 sm:mt-8 text-center">
                <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg p-3 sm:p-4 text-white">
                  <h4 className="font-bold mb-2 text-sm sm:text-base">🎯 选择最适合的联系方式</h4>
                  <p className="text-xs sm:text-sm opacity-90">
                    {contacts.length === 2 
                      ? `销售咨询请联系${contacts[0]?.name} | 技术问题请联系${contacts[1]?.name}`
                      : `专业服务请联系${contacts[0]?.name}`
                    }
                  </p>
                </div>
              </div>
          )}
        </Spin>
      </div>
    </Modal>
  );
};

export default ContactModal;